﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ScrumTime.ViewModels.UserViewModel>" %>


<div id="page_index_user" name="page_index_user">



<script type="text/javascript">
    $(document).ready(function () {
        document.title = 'ScrumTime 0.9 - User';
    });

    function setupReadOnlyUserRow() {
        $(document).ready(function () {
            $("#userTableBody .userRow:odd").addClass("typicalAltRows");
        });
    }

    $("#dialog-form-user").dialog({
        autoOpen: false,
        height: 200,
        width: 450,
        modal: true,
        buttons: {
            "Save": function () {
                saveUser();
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }

    });

    var new_user = false;
    function addUser() {
        new_user = true;
        clearFields();
        $("#user_name").attr("disabled", "");
        $("#user_password").attr("disabled", ""); 
        $("#dialog-form-user").dialog("open");
    }

    function editUser(guiUser) {
        new_user = false;
        clearFields();
        $("#user_name").attr("disabled", "disabled");
        $("#user_password").attr("disabled", "disabled"); 
        getdataUser(guiUser);       
    }


    function getdataUser(guiUser) {
        $.post('/User/data',
            {
                gui: guiUser
            },
            function (data) {
                if (verificarError(data)) return;
                sourceToGUI(data);
                $("#dialog-form-user").dialog("open");
            });
    }

    function sourceToGUI(data ) {
        datos = data.split('-:-');
        $('#user_name').val(datos[1]);
        $('#user_email').val(datos[3]);
    }


    function deleteUser(username, etiqueta_a) {
        jConfirm('This action removes the element. Are you sure you want to continue?', 'Confirmation Dialog', function (r) {
            if (!r)  return;            
            $.post('/User/Delete',
            {
                username: username
            },
            function (data) {
                if (verificarError(data)) return;
                $('#page_index_user').replaceWith(data);
            });
        });
   }


   function clearFields() {
       $('#user_gui').val("");
       $('#user_email').val("");
       $('#user_name').val("");
       $('#user_password').val("");
   }


   function saveUser() {
       var gui = $('#user_gui').val();
       var name = $('#user_name').val();
       var mail = $('#user_email').val();
       
       var password = $('#user_password').val();
       $.post('/User/Edit',
            {
                newuser:new_user,
                gui: gui,
                name: name,
                mail: mail,
                password: password
            },
            function (data) {
                if (verificarError(data)) {
                    $('#dialog-form-user').dialog("close");
                    return;
                }
                $('#page_index_user').replaceWith(data);
                $('#dialog-form-user').dialog("close");
                
            });
   }


    </script>    
    
    <div id="dialog-form-user" title="Create new user">
	    <form>
	        <fieldset>
                <%--<input type="hidden" id="user_gui" name="user_gui" />--%>
		        <label for="user_name">Name</label> 
		        <input type="text" name="user_name" id="user_name" class="text ui-widget-content ui-corner-all" /> <br />
		        <label for="user_email">Email</label>
		        <input type="text" name="user_email" id="user_email" value="" class="text ui-widget-content ui-corner-all" /><br />
		        <label for="user_password">Password</label>
		        <input type="password" name="user_password" id="user_password" value="" class="text ui-widget-content ui-corner-all" />
	        </fieldset>
	    </form>
    </div>
     

    <div style="margin-top:0px;margin-left:0px;">
        <div id="Div3" style="height:34px;width:960px;background-color:#fff;
            font-family:Verdana;font-size:12px;padding-top:6px;border-top:2px solid #999;border-left:2px solid #999;border-right:2px solid #999;">
            <div style="position:absolute;left:30px;width:115px;margin-top:10px">
                  <a href="#" id="scrumAddUserLink" class="simpleLink" onclick="addUser();">Add User</a>
            </div>            
            <div style="position:absolute;left:450px;width:80px;margin-top:0px;color:#79a52c;font-weight:bold;
                letter-spacing:1px;font-size:13px;text-align:left;">User</div>            
        </div>       
        <table style="width:964px;font-family:Verdana;padding:0;border:2px solid #999;height:30px;margin-left:0px;
            background-color:#f3f3f3;font-size:12px;color:#666;" cellpadding="0" cellspacing="0">
            <tr>
                <th style="text-align:center;width:210px;border:0px;background-color:#f3f3f3;">Name</th>
                <th style="text-align:left;width:514px;border:0px;background-color:#f3f3f3;">Mail</th>  
                <th style="text-align:center;border:0px;background-color:#f3f3f3;">Actions</th>
                <th style="width:30px;border:0px;background-color:#f3f3f3;"></th>
            </tr>
        </table>
        <div id="userContentListId" style="width:960px;height:438px;border-left:2px solid #999;border-right:2px solid #aaa;
            border-bottom:2px solid #999;overflow:scroll;">


            
            <table id="userTable" style="width:943px;font-family:Verdana;padding:0" cellpadding="0" cellspacing="0">                
                <tbody id="userTableBody" style="font-size:12px;">
                 <%            
                foreach (ScrumTime.Models.UserInfo uf in Model.Users) { 
                %>
                    <tr  class="userRow">
                        <td style="vertical-align:middle;text-align:center;width:210px;border:0px;font-size:11px;">
                            <a class="simpleLink product_" href="#" onclick="editUser('<%: uf.UserName %>');">
                                <%: uf.UserName %>
                            </a>
                        </td>
                        <td style="vertical-align:middle;text-align:left;width:514px;border:0px;font-size:11px;">
                            <a class="simpleLink product_" style="color:#79a52c;" href="#" onclick="editUser('<%: uf.UserName %>');">
                                <%: uf.Mail %>
                            </a>                            
                        </td>                        
                        <td style="vertical-align:middle;text-align:left;border:0px;font-size:11px;">
                            <a href="#" class="simpleLink" onclick="deleteUser('<%: uf.UserName %>', this);" style="width:100px;margin-left:94px;">
                                <img alt="Delete" title="Delete" style="" src="../../Content/Images/Menu/trash.png" />                                
                            </a>
                        </td>  
                        <td style="width:30px;border:0px;background-color:#f3f3f3;"></td>  
                        
                        <script type="text/javascript">           
                            setupReadOnlyUserRow();
                        </script>                   
                    </tr>
                <%
                }
                 %>             


         
                </tbody>
            </table>
    


        </div>       
        
    </div>

</div>